<!-- 个人信息 -->
<template>
	<view class="container">
		<view class="user-list u-flex u-row-between">
			<text class="list-name">头像</text>
			<view class="u-flex" @tap="onChooseImg">
				<image class="avatar" :src="userData.avatar" mode=""></image>
				<u-icon class="u-m-l-20" name="arrow-right" size="26" color="#999"></u-icon>
			</view>
		</view>
		<view class="user-list u-flex u-row-between">
			<text class="list-name">昵称</text>
			<view class="u-flex">
				<input class="list-val" v-model="userData.nickname"  @blur="onChangeNickName"  placeholder="请输入昵称~" maxlength="50"
					placeholder-style="color:#c8c9cc;fontSize:28rpx" />
				<u-icon class="u-m-l-20" name="arrow-right" size="26" color="#999"></u-icon>
			</view>
		</view>
		<view class="user-list u-flex u-row-between">
			<text class="list-name">手机</text>
			<view class="u-flex">
				<text class="list-val">{{ userInfo.mobile || '暂未绑定手机号' }}</text>
				
			</view>
		</view>
		<view class="user-list  u-flex u-row-between">
			<text class="list-name">等级</text>
			<view class="u-flex">
				<text class="list-val">{{ userInfo.level_id  }}</text>
			</view>
		</view>
		<view class="user-list  u-flex u-row-between u-m-b-10">
			<text class="list-name">邀请码</text>
			<view class="u-flex">
				<text class="list-val">{{userInfo.invitation_code  }}</text>
			</view>
		</view>


		<!-- 第三方账号 -->
		<!-- <view class="other-account" v-if="platform !== 'H5'">
			<view class="head-title u-p-x-30">第三方账号绑定</view> -->
			<!-- #ifdef MP-WEIXIN  -->
			<!-- 微信小程序 -->
			<!-- <view v-if="platform === 'wxMiniProgram'" class="account-list u-flex u-row-between">
				<view class=" u-flex u-col-center">
					<image class="list-img" :src="$IMG_URL + '/imgs/user/bind_wxmp.png'" mode=""></image>
					<text class="list-name">微信小程序</text>
				</view>
				<view class="u-flex u-col-center">
					<view class="info u-flex u-col-center">
						<open-data class="avatar u-m-r-20" type="userAvatarUrl"></open-data>
						<open-data class="name" type="userNickName"></open-data>
					</view>
					<view class="bind-box u-m-l-20">
						<button class="u-reset-button bind-btn"
							v-if="userInfo.id && !userInfo.verification.wxMiniProgram"
							@tap="bindThirdOauth('wxMiniProgram', 'Wechat')">
							绑定
						</button>
						<button class="u-reset-button relieve-btn" v-else
							@tap="unbindThirdOauth('wxMiniProgram', 'Wechat')">解绑</button>
					</view>
				</view>
			</view> -->
			<!-- #endif  -->

			<!-- #ifdef H5  -->
			<!-- 微信公众号 -->
		<!-- 	<view v-if="platform === 'wxOfficialAccount'" class="account-list u-flex u-row-between">
				<view class=" u-flex u-col-center">
					<image class="list-img" :src="$IMG_URL + '/imgs/user/bind_wxh5.png'" mode=""></image>
					<text class="list-name">微信公众号</text>
				</view>
				<view class="u-flex u-col-center">
					<view class="info u-flex u-col-center" v-if="thirdOauthInfo">
						<image class="avatar u-m-r-20" :src="thirdOauthInfo.headimgurl" mode=""></image>
						<view class="name">{{ thirdOauthInfo.nickname }}</view>
					</view>
					<view class="bind-box u-m-l-20">
						<button class="u-reset-button bind-btn"
							v-if="userInfo.id && !userInfo.verification.wxOfficialAccount"
							@tap="bindThirdOauth('wxOfficialAccount', 'Wechat')">
							绑定
						</button>
						<button class="u-reset-button relieve-btn" v-else
							@tap="unbindThirdOauth('wxOfficialAccount', 'Wechat')">解绑</button>
					</view>
				</view>
			</view> -->
			<!-- #endif  -->

			<!-- #ifdef APP-PLUS  -->
			<!-- App -->
		<!-- 	<view v-if="platform === 'App'" class="account-list u-flex u-row-between">
				<view class=" u-flex u-col-center">
					<image class="list-img" :src="$IMG_URL + '/imgs/user/bind_wx.png'" mode=""></image>
					<text class="list-name">微信</text>
				</view>
				<view class="u-flex u-col-center">
					<view class="info u-flex u-col-center" v-if="thirdOauthInfo">
						<image class="avatar u-m-r-20" :src="thirdOauthInfo.headimgurl" mode=""></image>
						<view class="name">{{ thirdOauthInfo.nickname }}</view>
					</view>
					<view class="bind-box u-m-l-20">
						<button class="u-reset-button bind-btn"
							v-if="userInfo.id && !userInfo.verification.wxOpenPlatform"
							@tap="bindThirdOauth('App', 'Wechat')">绑定</button>
						<button class="u-reset-button relieve-btn" v-else
							@tap="unbindThirdOauth('App', 'Wechat')">解绑</button>
					</view>
				</view>
			</view> -->
			<!-- #endif  -->
		<!-- </view> -->
		<!-- 保存 -->
		<button class="u-reset-button save-btn" :class="{ 'dis-btn': editInfoDisabled }" :disabled="editInfoDisabled"
			@tap="editUserInfo">保存</button>

		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- 日历 -->
		<u-calendar v-if="showCalendar" v-model="showCalendar" ref="calendar" safe-area-inset-bottom
			activeBgColor="#FA6E3F" toolTip="选择生日" :customStyle="{
				background: '#FA6E3F'
			}" mode="date" @change="changeCalendar"></u-calendar>
		<!-- modal -->

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import Auth from '@/shopro/permission/index.js';
	import wechat from '@/shopro/wechat/wechat';

	export default {
		components: {},
		data() {
			return {
				platform: this.$platform.get(),
				userData: {},
				showCalendar: false,
				editInfoDisabled: true,
				thirdOauthInfo: null //第三方信息
			};
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				authType: ({
					user
				}) => user.authType
			})
		},
		onLoad() {
			this.userData = uni.getStorageSync('userInfo'); //JSON.parse(JSON.stringify(this.userInfo));
			console.log(uni.getStorageSync('userInfo'),22222222222)
			// this.getThirdOauthInfo();
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 选择日期
			changeCalendar(e) {
				this.userData.birthday = e.result;
				this.editInfoDisabled = this.userData.birthday == this.userInfo.birthday;
			},
			// 修改密码
			changePwd() {
				this.showAuthModal('changePwd');
			},
			// 修改昵称
			onChangeNickName() {
				this.editInfoDisabled = this.userData.nickname == this.userInfo.nickname;
			},
			// 修改手机号
			bindMobile() {
				!this.userInfo.verification.mobile && this.showAuthModal('bindMobile');
			},
			// 更换头像
			async onChooseImg() {
				let authState = 0;
				authState += await new Auth('writePhotosAlbum').check();
				if (authState < 1) return;
				authState += await new Auth('camera').check();
				if (authState < 2) return;
        console.log(chooseImageRes);
				const chooseImageRes = await this.chooseImage(1);
				const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
				this.userData.avatar = uploadImageRes.url;
				this.userData.fileUrl = uploadImageRes.fileUrl;
				this.editInfoDisabled = this.userData.avatar == this.userInfo.avatar;
			},

			// 第三方绑定信息
			getThirdOauthInfo() {
				let that = this;
				that.$http('user.thirdOauthInfo').then(res => {
					if (res.code === 1) {
						that.thirdOauthInfo = res.data;
					}
				});
			},

			// 解绑
			unbindThirdOauth(platform, provider) {
				let that = this;
				that.$http('user.unbindThirdOauth', {
					platform,
					provider
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: res.msg
						});
						that.thirdOauthInfo = null;
						that.getUserInfo();
					}
				});
			},
			// 绑定
			async bindThirdOauth(platform, provider) {
				let that = this;
				switch (platform) {
					case 'wxOfficialAccount':
						wechat.bind();
						break;
					case 'wxMiniProgram':
						await wechat.bind();
						that.getUserInfo();
						break;
					case 'App':
						if (provider === 'Wechat') {
							await wechat.bind();
						}
						that.getUserInfo();
						// that.getThirdOauthInfo();
						break;
				}
			},

			// 修改信息
			editUserInfo() {
				let that = this;
				if (!that.userData.nickname) {
					this.$u.toast('昵称不能为空');
					return false;
				}
				that.$http(
					'user.profile', {
						nickname: that.userData.nickname,
						avatar: that.userData.fileUrl
					},
					'保存中...'
				).then(res => {
					if (res.code === 1) {
						that.getUserInfo();
						that.editInfoDisabled = true;
						that.$u.toast('保存成功');
					}
				});
			},
			// 图片处理-选择图片
			async chooseImage(count = 1) {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: count, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: res => {
							resolve(res.tempFilePaths);
						}
					});
				}).catch(e => {
					console.log(e);
				});
			},
			// 图片处理-上传图片
			async uploadImage(url) {
				const that = this;
				return new Promise((resolve, reject) => {
					that.$u.toast('上传中...');
					uni.uploadFile({
						url: that.$API_URL + 'upload/one',
						filePath: url,
						name: 'image',
						success: res => {
							res = JSON.parse(res.data);
							if (res.code === 1) {
								that.$u.toast('上传成功');
								resolve(res.data);
							} else {
								that.$u.toast('上传失败');
							}
						},
						complete: e => {
							uni.hideLoading();
						}
					});
				}).catch(e => {
					console.log(e);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 基本信息
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.dis-btn {
			opacity: 0.5;
		}
	}

	// 登录按钮
	.save-btn {
		margin: 200rpx auto;
		color: #fff!important;
		background: linear-gradient(90deg, #FA6E3F, #FEAB55);
		border-radius: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		width: 333rpx;
		border-radius: 34rpx;
	}

	// 三方
	.other-account {
		.head-title {
			line-height: 82rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.list-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.account-list {
			background-color: #fff;
			height: 100rpx;
			padding: 0 20rpx;

			.info {
				.avatar {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.bind-box {
				.bind-btn {
					padding: 0 20rpx;
					line-height: 60rpx;
					background: #f5f6f8;
					border-radius: 20rpx;
					color: #999;
				}

				.relieve-btn {
					border-radius: 20rpx;
					padding: 0 20rpx;
					line-height: 60rpx;
					background: rgba(#ff0000, 0.05);
					color: #ff0000;
				}
			}
		}
	}

	// 个人信息项
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 20rpx;

		.list-name {
			font-size: 28rpx;
		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}

		.cuIcon-right {
			margin-left: 25rpx;
		}

		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: right;
		}
	}
</style>
